<template>
    <el-skeleton animated :row="16" :loading="gjloading">
        <div style="width: 100%;">
            <div>
                <el-row class="row-bg" id="k1">
                    <el-col :span="8">
                        <el-button v-show="(xzrww == true)" style="display: flex;float: left;margin-left: 10px;"
                            type="primary" size="small" @click="xzrw">安排任务</el-button>
                        <el-button v-show="(xzgqq == true)" style="display: flex;float: left;margin-left: 10px;"
                            type="primary" size="small" @click="xzgq">安排关卡</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="input" placeholder="根据关键字查询" @input="handlerChange" class="input-with-select">
                            <template #append>
                                <el-button circle>
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                </el-button>
                            </template>
                        </el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-row>
                            <el-col :span="8">
                            </el-col>
                            <el-col :span="8">
                            </el-col>
                            <el-col :span="8">
                                <el-radio-group v-model="rg">
                                    <el-row gutter="30">
                                        <el-col :span="12">
                                            <el-radio :label="1" size="large" @change="rw">任务</el-radio>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-radio :label="2" size="large" @change="gq">关卡</el-radio>
                                        </el-col>
                                    </el-row>


                                </el-radio-group>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
            <div v-show="(task == true)" style="margin-top: 20px;">
                <div>
                    <el-table border :data="datarw" v-loading="loadingshow"
                        style="width: 99%;height: 500px;margin-left: 10px;" stripe>
                        <el-table-column prop="id" v-if="false" label="编号" width="" />
                        <el-table-column type="index" label="序号" align="center" width="80" />
                        <el-table-column label="任务名称" prop="name"></el-table-column>
                        <el-table-column label="源任务" prop="tName"></el-table-column>
                        <el-table-column label="组织" prop="orgs"></el-table-column>
                        <el-table-column label="任务类型" prop="type">
                            <template #default="scope">
                                <el-tag v-if="(scope.row.type == 1)" type="primary">普通</el-tag>
                                <el-tag v-if="(scope.row.type == 2)" type="warning">周期</el-tag>
                                <el-tag v-if="(scope.row.type == 3)" type="warning">悬赏</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="周期天数" prop="period"></el-table-column>
                        <el-table-column label="奖励积分" prop="point"></el-table-column>
                        <el-table-column label="额外积分" prop="extraPoint"></el-table-column>
                        <el-table-column label="开始时间" prop="begin"></el-table-column>
                        <el-table-column label="结束时间" prop="end"></el-table-column>
                        <el-table-column label="完成次数" prop="completeCount"></el-table-column>
                        <el-table-column label="是否禁用" prop="isBan">
                            <template #default="scope">
                                <el-tag v-if="(scope.row.isBan == 0)">否</el-tag>
                                <el-tag v-else>是</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" width="120">
                            <template #default="scope">
                                <el-button type="primary" @click="inforw(scope.row)">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div id="k2">
                        <el-pagination v-model:current-page="pagerw" v-model:page-size="limitrw"
                            :page-sizes="[10, 20, 40, 60]" :background="true"
                            layout="sizes, prev, pager, next" :total="totalrw" @size-change="handleSizeChangerw"
                            @current-change="handleCurrentChangerw" />
                    </div>
                </div>
            </div>
            <div v-show="(level == true)" v-loading="loadingshow" style="margin-top: 20px;">
                <el-table border :data="datagq" style="width: 99%;max-height: 500px;margin-left: 10px;" stripe>
                    <el-table-column prop="id" v-if="false" label="编号" width="" />
                    <el-table-column type="index" label="序号" align="center" width="80" />
                    <el-table-column label="关卡名称" prop="name"></el-table-column>
                    <el-table-column label="源关卡" prop="lName"></el-table-column>
                    <el-table-column label="组织" prop="orgs"></el-table-column>
                    <el-table-column label="奖励积分" prop="point"></el-table-column>
                    <el-table-column label="额外积分" prop="extraPoint"></el-table-column>
                    <el-table-column label="开始时间" prop="begin"></el-table-column>
                    <el-table-column label="结束时间" prop="end"></el-table-column>
                    <el-table-column label="通关次数" prop="completeCount"></el-table-column>
                    <el-table-column label="是否禁用" prop="isBan">
                        <template #default="scope">
                            <el-tag v-if="(scope.row.isBan == 0)">否</el-tag>
                            <el-tag v-else>是</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="120">
                        <template #default="scope">
                            <el-button type="primary" @click="infogq(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div id="k2">
                    <el-pagination v-model:current-page="page" v-model:page-size="limit"
                            :page-sizes="[10, 20, 40, 60]" :background="true"
                            layout="sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>
    </el-skeleton>
</template>
<script lang="ts">
import router from '@/router'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetTaskArranges, GetLevelArranges } from '../../../api/practice/arrange/index'
export default defineComponent({
    setup() {
        const data = reactive({
            task: false,//任务是否显示
            level: false,//关卡是否显示
            xzrww: false,
            xzgqq: false,
            datarw: [],//任务表格数据
            datagq: [],//关卡表格数据
            page: 1,
            limit: 5,
            pagerw: 1,
            limitrw: 5,
            total: 0,
            totalrw: 0,
            rg: 1,
            key: '',
            isBan: 0,
            gjloading: true,//骨架屏
            loadingshow: false,//表格加载
            input: ''
        })

        const events = {
            //任务表格显示
            rw() {
                data.task = true
                data.level = false
                data.xzrww = true
                data.xzgqq = false
            },
            //关卡表格显示
            gq() {
                data.level = true
                data.task = false
                data.xzgqq = true
                data.xzrww = false
            },
            //任务表格数据
            getdatarw(key: any, isBan: any) {
                GetTaskArranges({
                    page: data.pagerw,
                    limit: data.limitrw,
                    key: key,
                    isBan: isBan
                }).then((res: any) => {
                    console.log('/////--==', res)
                    if (res.result == 0) {
                        data.task = true
                        data.level = false
                        data.xzrww = true
                        data.totalrw = res.data.total
                        data.datarw = res.data.data
                        data.gjloading = false
                        data.loadingshow = false
                    }
                })
            },
            //关卡表格数据
            getdatagq(key: any, isBan: any) {
                GetLevelArranges({
                    page: data.page,
                    limit: data.limit,
                    key: key,
                    isBan: isBan
                }).then((res: any) => {
                    console.log('--------', res)
                    if (res.result == 0) {
                        data.total = res.data.total
                        data.datagq = res.data.data
                        data.gjloading = false
                        data.loadingshow = false
                    }
                })
            },
            //任务分页
            handleSizeChangerw(val: any) {
                data.limitrw = val
                events.getdatarw(data.key, data.isBan);
                data.loadingshow = true;
            },
            handleCurrentChangerw(val: any) {
                data.pagerw = val
                events.getdatarw(data.key, data.isBan);
                data.loadingshow = true;
            },
            //关卡分页
            handleSizeChange(val: any) {
                data.limit = val
                events.getdatagq(data.key, data.isBan);
                data.loadingshow = true;
            },
            handleCurrentChange(val: any) {
                data.page = val
                events.getdatagq(data.key, data.isBan);
                data.loadingshow = true;
            },
            //查询
            handlerChange(e: any) {
                data.loadingshow = true;
                data.key = e;
                events.getdatarw(data.key, data.isBan);
                events.getdatagq(data.key, data.isBan);
                if (!e) {
                    data.key = "";
                    events.getdatarw(data.key, data.isBan);
                    events.getdatagq(data.key, data.isBan);
                }
            },
            //新增任务
            xzrw() {
                data.loadingshow = true;
                setTimeout(() => {
                    data.loadingshow = false
                    router.push('/practice/arrange/addtask')
                }, 1000)
            },
            //新增关卡
            xzgq() {
                data.loadingshow = true;
                setTimeout(() => {
                    data.loadingshow = false
                    router.push('/practice/arrange/addlevel')
                }, 1000)
            },
            //任务详情
            inforw(obj: any) {
                data.loadingshow = true
                setTimeout(() => {
                    data.loadingshow = false
                    router.push("/practice/arrange/taskdetail?id=" + obj.id)
                }, 1000)
            },
            //关卡详情
            infogq(obj: any) {
                data.loadingshow = true
                setTimeout(() => {
                    data.loadingshow = false
                    router.push("/practice/arrange/leveldetail?id=" + obj.id)
                }, 1000)
            }
        }

        onMounted(() => {
            events.getdatarw(data.key, data.isBan);
            events.getdatagq(data.key, data.isBan);
            data.xzgqq == false
        })

        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>
<style>
#k1 {
    margin-left: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    margin-top: 10px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#k2 {
    width: 99%;
    margin-top: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}
</style>
